<template>
  <ul>
    <Item
      v-for="(item, index) of items"
      :key="index"
      :item="item"
      :index="index"
      @delete-item="deleteItem"
    />
  </ul>
</template>

<script>
import Item from './Item'
export default {
  name: 'Items',
  components: {
    Item
  },
  props: ['newItem'],
  data () {
    return {
      items: []
    }
  },
  methods: {
    deleteItem (index) {
      this.items.splice(index, 1)
    }
  },
  watch: {
    newItem (newValue) {
      this.items.push({
        ok: false,
        content: newValue
      })
    },
    items: {
      handler () {
        localStorage.setItem('items', JSON.stringify(this.items))
      },
      deep: true
    }
  },
  created () {
    this.items = JSON.parse(localStorage.getItem('items')) || []
  }
}
</script>

<style scoped>
  ul {
    list-style-type: none;
    height: 500px;
  }
</style>
